<template>
	<view>
		<view class="top_hint">
			<image class="warning_icon" src="../../static/imgs/souti/wering.png"></image>
			<text>请注意核对查询题目是否与返回题目一致</text>
		</view>
		<view class="show_support">
			<image src="../../static/imgs/souti/mooc.png"></image>
			<image src="../../static/imgs/souti/xxt.png"></image>
			<image src="../../static/imgs/souti/ykt.png"></image>
			<image src="../../static/imgs/souti/zd.png"></image>
			<image src="../../static/imgs/souti/zhs.png"></image>
			<image src="../../static/imgs/souti/yukt.png"></image>
			<image src="../../static/imgs/souti/zj.png"></image>
			<image src="../../static/imgs/souti/gxb.png"></image>
			<image src="../../static/imgs/souti/cxb.png"></image>
			<image src="../../static/imgs/souti/mhzx.png"></image>
		</view>
		 <view class="contane_top">
		        <image :src="$store.user.avatarUrl"></image>
		    </view>
		    <view class="contane">
		        <view class="question_eare">
		            <textarea placeholder="请输入需要查询的题目或者将题目粘贴到此处,点击提交即可查询答案!" 
					 v-model="textareaValue" 
					 show-confirm-bar="false"></textarea>
		            <view class="question_btn">
		                <button class="butonStyle" @click="question_submit">提交</button>
		                <button class="clear_question" @click="question_clear">清空</button>
		                <button class="butonStyle" @click="question_paste">粘贴</button>
		            </view>
		        </view>
		        <view class="answer_question" v-if="showAnswer">
		            <view class="answer_rowp_question">
		                <text>问题：</text>
		                <view>{{return_question}}</view>
		            </view>
		            <view class="answers_rowp">
		                <text>答案：</text>
		                <view>{{return_answer}}</view>
		            </view>
		        </view>
		    </view>
			<mpopup ref="mpopup" :isdistance="true"></mpopup>  
	</view>
</template>

<script>
	import {Http} from '@/utils/http.js';
	import {promisic} from "@/utils/utils.js";
	import mpopup from '@/components/xuan-popup/xuan-popup.vue'
	export default {
		data() {
			return {
				textareaValue:'',
				showAnswer:false,
				requestUrl:'https://api.gochati.cn/jsapi.php?token=cd9c28f198af8ffd64d7094b71794a04&q=',
				return_question:'',
				return_answer:''
			}
		},
		components:{
			mpopup	
		},
		methods: {
			async question_submit(){
				if(!this.textareaValue){
					return
				}
				let res = await promisic(uni.request)({
					url: this.requestUrl + this.textareaValue,
					method: "GET",
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					sslVerify:false,
				})
				if(res.data.code == 0){
					this.$refs.mpopup.open({
						type:'err',
						content:res.data.tm,
						timeout:2000,
						isClick:false
					});
					return
				}
				this.return_question = res.data.tm
				this.return_answer = res.data.da
				this.showAnswer = true
				console.log(res)
			},
			question_clear(){
				this.textareaValue = ""
				this.showAnswer = false
			},
			question_paste(){
				uni.getClipboardData({
				    success: (res)=> {
						console.log(res)
				        this.textareaValue = res.data;
				    }
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
.butonStyle{
	background-color: $fun-theme-color;
}
.top_hint {
    display: flex;
    justify-content: center;
    height: 60rpx;
    width: 100%;
    background-color: rgb(243, 169, 10);
}

.warning_icon {
    margin: auto 0;
    padding-right: 20rpx;
    height: 40rpx;
    width: 40rpx;
}

.top_hint text {
    line-height: 60rpx;
    font-size: 25rpx;
    color: #FFF;
}

.show_support {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    width: 80%;
    margin: 15rpx auto;
}

.show_support image {
    display: flex;
    border: 3rpx white solid;
    box-sizing: border-box;
    margin-right: 10rpx;
    margin-top: 10rpx;
    border-collapse: collapse;
    border-radius: 20rpx;
    box-shadow: -3rpx -3rpx 2rpx #a7a7a7;
    width: 100rpx;
    height: 100rpx;
}

.contane{
    margin: 0 auto;
    background-color: #FFF;
    border-radius: 15rpx;
    width: 95%;
    padding-top:150rpx;
    padding-bottom: 50rpx;
    box-shadow: -3rpx -3rpx 2rpx #a7a7a7;
}
.contane_top{
    width: 200rpx;
    height: 100rpx;
    margin: 0 auto;
}
.contane_top image{
    width: 200rpx;
    height: 200rpx;
    border: #FFF 15rpx solid;
    border-radius: 50%;
    box-shadow: 0rpx -5rpx 2rpx #a7a7a7;
}
.question_eare textarea {
    display: block;
    border-radius: 20rpx;
    margin: 20rpx auto;
    padding: 20rpx 25rpx;
    height: 150rpx;
	width: 600rpx;
    // background-color: rgb(191, 253, 253);
	background-color: #F2F2F2;
    font-size: 25rpx;
}

.question_btn {
    display: flex;
    justify-content: space-around;
}

.question_btn button {
    display: block;
    width: 200rpx !important;
}

.clear_question {
    background-color: red;
    color: #FFF;
}
.answer_question{
    margin: 20rpx 50rpx;
}
.answer_rowp_question text,
.answers_rowp text {
    font-size: 30rpx;
    font-weight: bolder;
    color: red;
}
.answer_rowp_question view,
.answers_rowp view {
    margin: 10rpx 10rpx;
    padding: 30rpx 20rpx;
    line-height: 30rpx;
    // background-color: rgb(191, 253, 253);
	background-color: #F2F2F2;
    border-radius: 10rpx;
    font-size: 25rpx;
    color: black;
}
</style>
